import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import request from '../../utils/request'

export default class Main extends Component {
  static Prototype = {
    lsit: PropTypes.array
  }
  async handleDelete(id) {
    await request.delete(`${id}`)
    this.props.getList()
  }
  render () {
    const { list } = this.props
    return (
      <section className='main'>
        <input id='toggle-all' className='toggle-all' type='checkbox' />
        <label htmlFor='toggle-all'>Mark all as complete</label>
        <ul className='todo-list'>
          {list.map((item) => (
            <li key={item.id} className={classNames({
              completed: item.done
            })}>
              <div className='view'>
                <input className='toggle' type='checkbox' checked={item.done} />
                <label>{item.name}</label>
                <button className='destroy' onClick={() =>{this.handleDelete(item.id)}}></button>
              </div>
              <input className='edit' value='Create a TodoMVC template' onChange={() => { }} />
            </li>))}


        </ul>
      </section>
    )
  }
}